<template>
  <div class="out-wraper">
    <a-row>
      <a-col :span="24">
        <a-card title="折线图">
          <line-chart :option="lineChartOptions"></line-chart>
        </a-card>
      </a-col>
    </a-row>
    <a-row class="mb20">
      <a-col :span="24">
        <a-card title="折线图">
          <line-chart :option="lineChartOptions2"></line-chart>
        </a-card>
      </a-col>
    </a-row>
    <a-row class="mb20">
      <a-col :span="24">
        <a-card title="折线图">
          <line-chart :option="lineChartOptions3"></line-chart>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import lineChart from '@/components/Charts/LineChart.vue'
import cloneDeep from 'lodash.clonedeep'
export default {
  components: { lineChart },
  name: 'LineCharts',
  data() {
    return {
      lineChartOptions: null,
      lineChartOptions2: null,
      lineChartOptions3: null
    }
  },
  created() {
    const _this=this
    this.lineChartOptions=cloneDeep(_this.generateOption({
      xData: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
      series: [
        {
          data: [150,230,224,218,135,147,260],
          type: 'line',
          name: 'Alpha',
          label: {
            show: true
          },
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            normal: {
              color: 'rgb(255, 153, 0)', // 改变折线点的颜色
              lineStyle: {
                color: 'rgb(255, 153, 0)' // 改变折线颜色
              }
            }
          },
          emphasis: {
            // 鼠标hover上去的时候，拐点的颜色和样式
            itemStyle: {
              borderColor: 'rgb(255, 153, 0)', // 图形的描边颜色
              borderWidth: 4, // 描边的线宽
              shadowBlur: 4, // 图形的阴影大小
              shadowColor: 'rgb(255, 153, 0)' // 图形的阴影颜色
            }
          }
        }
      ]
    }))
    this.lineChartOptions2=cloneDeep(_this.generateOption({
      xData: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
      series: [
        {
          data: [150,230,224,218,135,147,260],
          type: 'line',
          name: 'Beta',
          label: {
            show: true
          },
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            normal: {
              color: 'rgb(255, 153, 0)', // 改变折线点的颜色
              lineStyle: {
                color: 'rgb(255, 153, 0)' // 改变折线颜色
              }
            }
          },
          emphasis: {
            // 鼠标hover上去的时候，拐点的颜色和样式
            itemStyle: {
              borderColor: 'rgb(255, 153, 0)', // 图形的描边颜色
              borderWidth: 4, // 描边的线宽
              shadowBlur: 4, // 图形的阴影大小
              shadowColor: 'rgb(255, 153, 0)' // 图形的阴影颜色
            }
          }

        },
        {
          data: [15,23,22,21,13,14,26],
          type: 'line',
          name: 'Sharpe',
          label: {
            show: true
          },
          symbol: 'diamond',
          symbolSize: 8,
          itemStyle: {
            normal: {
              color: 'rgb(50, 108, 175)', // 改变折线点的颜色
              lineStyle: {
                color: 'rgb(50, 108, 175)' // 改变折线颜色
              }
            }
          },
          emphasis: {
            // 鼠标hover上去的时候，拐点的颜色和样式
            itemStyle: {
              borderColor: 'rgb(50, 108, 175)', // 图形的描边颜色
              borderWidth: 4, // 描边的线宽
              shadowBlur: 4, // 图形的阴影大小
              shadowColor: 'rgb(50, 108, 175)' // 图形的阴影颜色
            }
          }
        }
      ]
    }))
    this.lineChartOptions3=cloneDeep(_this.generateOption({
      xData: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
      series: [
        {
          data: [15,23,22,21,13,14,26],
          type: 'line',
          name: 'Sortino',
          label: {
            show: true
          },
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            normal: {
              color: 'rgb(50, 108, 175)', // 改变折线点的颜色
              lineStyle: {
                color: 'rgb(50, 108, 175)' // 改变折线颜色
              }
            }
          },
          emphasis: {
            // 鼠标hover上去的时候，拐点的颜色和样式
            itemStyle: {
              borderColor: 'rgb(50, 108, 175)', // 图形的描边颜色
              borderWidth: 4, // 描边的线宽
              shadowBlur: 4, // 图形的阴影大小
              shadowColor: 'rgb(50, 108, 175)' // 图形的阴影颜色
            }
          },
          areaStyle: {}
        }
      ]
    }))
  },
  methods: {
    generateOption({
      xData,
      series
    }) {
      return {
        tooltip: {
          trigger: 'axis'
          // formatter: '{a}： {c}'
          // formatter: function (params) {
          //   console.log('tooltip', params)
          //   return `
          //   <div style="border: 1px solid Red"> hhh</div>
          //   `
          // }
        },
        xAxis: {
          type: 'category',
          splitLine: { show: true },
          axisTick: { show: false },
          data: xData
        },
        yAxis: {
          type: 'value',
          position: 'right'
        },
        series: series
      }
    }
  }

}
</script>
<style scoped lang="less">
.mb20 {
  margin-bottom: 20px;
}
.tooltipWrap {
  border: 1px solid;
}
</style>
